<!Doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>微信小程序开发资源汇总 | 菜鸟教程</title>

  <meta name='robots' content='max-image-preview:large' />
<link rel='stylesheet' id='classic-theme-styles-css' href='../0/classic-themes.min.css?ver=6.2' type='text/css' media='all' />
<link rel="canonical" href="../w3cnote/wx-xcx-repo.html" />
<meta name="keywords" content="微信小程序开发资源汇总">
<meta name="description" content=".article-intro ul li a{font-size:1.2em;} 目录   官方文档 工具 插件 组件 Demo  置顶  WePY：组件化的小程序开发框架 &amp;#x1f4af; WePY 开发资源汇总 &amp;#x1f4af;  官方文档  小程序设计指南 小程序开发教程 小程序框架 小程序组件 小程序 API 小程序开发者工具  ↑ 返回目录 ↑ 工具  Taro ★29.2k+ - 使用 React 的方式..">
		
	<link rel="shortcut icon" href="https://static.runoob.com/images/favicon.ico">
	<link rel="stylesheet" href="../0/style.css?v=1.170" type="text/css" media="all" />	
	<link rel="stylesheet" href="../0/font-awesome.min.css" media="all" />	
  <!--[if gte IE 9]><!-->
  <script src=""></script>
  <!--<![endif]-->
  <!--[if lt IE 9]>
     <script src=""></script>
     <script src=""></script>
  <![endif]-->
  <link rel="apple-touch-icon" href="https://static.runoob.com/images/icon/mobile-icon.png"/>
  <meta name="apple-mobile-web-app-title" content="菜鸟教程">
</head>
<body>

<!--  头部 -->
<div class="container logo-search">

  <div class="col search row-search-mobile">
    <form action="index.php">
      <input class="placeholder" placeholder="搜索……" name="s" autocomplete="off">
      
    </form>
  </div>

  <div class="row">
    <div class="col logo">
      <h1><a href="../">菜鸟教程 -- 学的不仅是技术，更是梦想！</a></h1>
    </div>
        <div class="col right-list"> 
    <button class="btn btn-responsive-nav btn-inverse" data-toggle="collapse" data-target=".nav-main-collapse" id="pull" style=""> <i class="fa fa-navicon"></i> </button>
    </div>
        
    <div class="col search search-desktop last">
      <div class="search-input" >
      <form action="//www.runoob.com/" target="_blank">
        <input class="placeholder" id="s" name="s" placeholder="搜索……"  autocomplete="off" style="height: 44px;">
      </form>
      
      </div>
    </div>
  </div>
</div>



<!-- 导航栏 -->
<div class="container navigation">
    <div class="row">
        <div class="col nav">
            

                        <ul class="pc-nav" id="note-nav">
                <li><a href="../">首页</a></li>
                <li><a href="../w3cnote">笔记首页</a></li>
                <li><a href="../w3cnote/android-tutorial-intro.html" title="Android 基础入门教程">Android</a></li>
                <li><a href="../w3cnote/es6-tutorial.html" title="ES6 教程">ES6 教程</a></li>
                <li><a href="../w3cnote/ten-sorting-algorithm.html" title="排序算法">排序算法</a></li>
                <li><a href="../w3cnote/hadoop-tutorial.html" title="Hadoop 教程">Hadoop</a></li>
                <li><a href="../w3cnote/zookeeper-tutorial.html" title="Zookeeper 教程">Zookeeper</a></li>
                <li><a href="../w3cnote/verilog-tutorial.html" title="Verilog 教程">Verilog</a></li>
                <li><a href="../w3cnote_genre/code" title="编程技术">编程技术</a></li> 
                <li><a href="../w3cnote_genre/coderlife" title="程序员人生">程序员人生</a></li>
                
                <!--<li><a href="javascript:;" class="runoob-pop">登录</a></li>
                
                
                        <li>
                <a style="font-weight:bold;" href="../linux/linux-tutorial.html#yunserver" target="_blank" onclick="_hmt.push(['_trackEvent', 'aliyun', 'click', 'aliyun'])" title="kkb">云服务器</a>
                </li>
                <li><a href="http://gk.link/a/104mQ" target="_blank" style="font-weight: bold;"onclick="_hmt.push(['_trackEvent', '极客时间', 'click', 'jike'])" title="我的圈子">极客时间</a></li>
            
                
                <li><a target="_blank" href="../shoppinglist" rel="nofollow">知识店铺</a></li> 
        -->
            </ul>
                        
              
            <ul class="mobile-nav">
                <li><a href="../w3cnote">首页</a></li>
                <li><a href="../w3cnote_genre/android" target="_blank" title="Android 基础入门教程">Android</a></li>
                <li><a href="../w3cnote/es6-tutorial.html" target="_blank" title="ES6 教程">ES6</a></li>
                <li><a href="../w3cnote_genre/joke" target="_blank" title="程序员笑话">逗乐</a></li>
                
                <a href="javascript:void(0)" class="search-reveal">Search</a> 
            </ul>
            
        </div>
    </div>
</div>


<!--  内容  -->
<div class="container main">
	<div class="row">

		<div class="col middle-column big-middle-column">
	 			<div class="article">
			<div class="article-heading">
				<h2>微信小程序开发资源汇总</h2>				<h3><em>分类</em> <a href="../w3cnote_genre/code" title="编程技术" >编程技术</a> </h3>
			</div>
			<div class="article-body note-body">
				<div class="article-intro">
					<style>.article-intro ul li a{font-size:1.2em;}</style>
<h2><a target="_blank" id="目录" class="anchor" href="#目录" aria-hidden="true" rel="noopener"></a>目录</h2>

<ul>
<li><a href="#user-content-%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3">官方文档</a></li>
<li><a href="#user-content-%E5%B7%A5%E5%85%B7">工具</a></li>
<li><a href="#user-content-%E6%8F%92%E4%BB%B6">插件</a></li>
<li><a href="#user-content-%E7%BB%84%E4%BB%B6">组件</a></li>
<li><a href="#user-content-demo">Demo</a></li>
</ul>
<img decoding="async" style="display:none;" src="https://www.runoob.com/wp-content/uploads/2016/11/123.png"><h2><a id="user-content-置顶" class="anchor" aria-hidden="true" href="#置顶"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>置顶</h2>
<ul>
<li><a target="_blank" href="https://github.com/Tencent/wepy" rel="noopener">WePY：组件化的小程序开发框架</a> <g-emoji class="g-emoji" alias="100" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png">&#x1f4af;</g-emoji></li>
<li><a target="_blank" href="https://github.com/aben1188/awesome-wepy" rel="noopener">WePY 开发资源汇总</a> <g-emoji class="g-emoji" alias="100" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png">&#x1f4af;</g-emoji></li>
</ul>
<h2><a id="user-content-官方文档" class="anchor" aria-hidden="true" href="#官方文档"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>官方文档</h2>
<ul>
<li><a target="_blank" href="https://developers.weixin.qq.com/miniprogram/design/index.html" rel="nofollow noopener">小程序设计指南</a></li>
<li><a target="_blank" href="https://developers.weixin.qq.com/miniprogram/dev/framework/" rel="nofollow noopener">小程序开发教程</a></li>
<li><a target="_blank" href="https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html" rel="nofollow noopener">小程序框架</a></li>
<li><a target="_blank" href="https://developers.weixin.qq.com/miniprogram/dev/component/" rel="nofollow noopener">小程序组件</a></li>
<li><a target="_blank" href="https://developers.weixin.qq.com/miniprogram/dev/api/" rel="nofollow noopener">小程序 API</a></li>
<li><a target="_blank" href="https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html" rel="nofollow noopener">小程序开发者工具</a></li>
</ul>
<p><a href="#%E7%9B%AE%E5%BD%95">↑ 返回目录 ↑</a></p>
<h2><a id="user-content-工具" class="anchor" aria-hidden="true" href="#工具"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>工具</h2>
<ul>
<li><a target="_blank" href="https://github.com/NervJS/taro" rel="noopener">Taro ★29.2k+</a> - 使用 React 的方式开发小程序的框架，同时支持生成多端应用</li>
<li><a target="_blank" href="https://github.com/dcloudio/uni-app" rel="noopener">uni-app ★32.4k+</a> - 使用 Vue 语法开发小程序、H5、App的统一框架</li>
<li><a target="_blank" href="https://github.com/Tencent/wepy" rel="noopener">WePY ★20k+</a> -  支持组件化的小程序开发框架</li>
<li><a target="_blank" href="https://github.com/Meituan-Dianping/mpvue" rel="noopener">mpvue ★19k+</a> - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系</li>
<li><a target="_blank" href="https://github.com/didi/chameleon" rel="noopener">chameleon ★7k+</a> - 一套代码运行多端，一端所见即多端所见</li>
<li><a target="_blank" href="https://github.com/wechat-miniprogram/kbone" rel="noopener">kbone ★2.8k+</a> - Web 与小程序同构解决方案</li>
<li><a target="_blank" href="https://github.com/remaxjs/remax" rel="noopener">Remax ★2.4k+</a> -  使用真正的 React 构建小程序</li>
<li><a target="_blank" href="https://github.com/chemzqm/wept" rel="noopener">wept ★2.3k</a> - 微信小程序实时运行环境</li>
<li><a target="_blank" href="https://github.com/cytle/wechat_web_devtools" rel="noopener">wechat_web_devtools ★2.3k+</a> -  Linux 下微信开发者工具</li>
<li><a target="_blank" href="https://github.com/tencentyun/wafer" rel="noopener">wafer ★2.1k</a> - 快速构建具备弹性能力的微信小程序</li>
<li><a target="_blank" href="https://github.com/didi/mpx" rel="noopener">MPX ★2.1k+</a> - 增强型小程序框架，深度性能优化，支持跨小程序平台开发，完全兼容原生小程序组件</li>
<li><a target="_blank" href="https://github.com/maichong/labrador" rel="noopener">Labrador ★1.7k</a> - 支持 ES6/7 的微信小程序组件化开发框架</li>
<li><a target="_blank" href="https://github.com/liriliri/licia" rel="noopener">licia ★1.7k</a> - 支持小程序的 JS 工具库</li>
<li><a target="_blank" href="https://github.com/kaola-fed/megalo" rel="noopener">megalo ★1.6k</a> - 基于 Vue 的小程序开发框架</li>
<li><a target="_blank" href="https://github.com/Tencent/cloudbase-framework" rel="noopener">CloudBase Framework ★1.1k</a> - 腾讯云开发开源一键部署工具，支持部署小程序及云开发应用</li>
<li><a target="_blank" href="https://github.com/tinajs/tina" rel="noopener">tina ★1k+</a> - 轻巧的渐进式微信小程序框架</li>
<li><a target="_blank" href="https://github.com/qiu8310/minapp" rel="noopener">minapp ★800+</a> - TypeScript 版小程序开发框架（兼容原生小程序代码）</li>
<li><a target="_blank" href="https://github.com/ecomfe/okam" rel="noopener">Okam ★300+</a> - 使用类 Vue 方式开发小程序的渐进增强框架，支持生成微信/百度等主流平台的小程序</li>
<li><a target="_blank" href="https://github.com/xpmjs/xpmjs" rel="noopener">xpmjs ★100+</a> - 微信小程序云端增强 SDK</li>
<li><a target="_blank" href="https://github.com/Jeff2Ma/WeApp-Workflow" rel="noopener">WeApp-Workflow ★100+</a> -  基于 Gulp 的微信小程序前端开发工作流</li>
<li><a target="_blank" href="https://github.com/mdsb100/gulp-wxa-copy-npm" rel="noopener">gulp-wxa-copy-npm</a> - 微信小程序 gulp 插件，解决 npm 包管理和 babel-runtime</li>
<li><a target="_blank" href="https://github.com/haojy/weact" rel="noopener">weact</a> - 用 JSX 快速开发小程序</li>
<li><a target="_blank" href="https://github.com/cytle/socket.io-mp-client" rel="noopener">socket.io-mp-client</a> - 微信小程序 socket.io 客户端</li>
<li><a target="_blank" href="https://wxajs.github.io/wxa/" rel="nofollow noopener">@wxa</a> - AOP小程序开发框架</li>
<li><a target="_blank" href="https://github.com/Genuifx/postcss-pxtorpx-pro" rel="noopener">postcss-pxtorpx-pro</a> - postcss px 转 rpx 插件</li>
<li><a target="_blank" href="https://github.com/allanguys/px2rpx" rel="noopener">px2rpx</a> - Px 转 Rpx 在线工具</li>
<li><a target="_blank" href="https://github.com/seanlong/wxml-parser" rel="noopener">wxml-parser</a> -  JavaScript WXML parser</li>
<li><a target="_blank" href="https://github.com/tolerance-go/weappx" rel="noopener">weappx</a> - 基于 redux 的数据层管理框架</li>
<li><a target="_blank" href="https://github.com/tolerance-go/weapp-start" rel="noopener">weapp-start</a> - 基于插件机制的开发脚手架，改善原生小程序开发体验</li>
<li><a href="http://developer.egret.com/cn/github/egret-docs/Wing/update/update320/index.html" rel="nofollow">Egret Wing</a> - 支持微信小程序实时预览的 IDE</li>
<li><a target="_blank" href="https://github.com/Authing/wxapp-graphql" rel="noopener">wxapp-graphql</a> - 小程序 GraphQL 客户端</li>
<li><a target="_blank" href="https://github.com/ksky521/gulp-wxapp-boilerplate" rel="noopener">gulp-wxapp-boilerplate</a> - 小程序+小程序云 Gulp 开发脚手架，支持云函数 mock</li>
<li><a target="_blank" href="https://github.com/cnyballk/wenaox" rel="noopener">wenaox</a> - 小程序数据层管理 ，轻量性能好，支持中间件</li>
<li><a target="_blank" href="https://github.com/Authing/authing-wxapp-sdk" rel="noopener">authing-wxapp-sdk</a> - 身份认证 for 微信小程序</li>
<li><a target="_blank" href="https://github.com/CoolRice/weapp-eslint-boilerplate" rel="noopener">weapp-eslint-boilerplate</a> - 微信小程序 Eslint 通用模板文件，节省自己配置的时间</li>
<li><a target="_blank" href="https://iexception.github.io/anka-doc/book/index.html" rel="nofollow noopener">Anka</a> - 渐进式小程序开发工具集，提供通用的开发函数库及组件</li>
<li><a target="_blank" href="https://github.com/BakerJQ/WeAppBunXin" rel="noopener">WeAppBunXin</a> - 微信小程序开发之影分身术，一套代码生成多个小程序</li>
<li><a target="_blank" href="https://github.com/NewFuture/miniprogram-build" rel="noopener">miniprogram-build</a> - 小程序命令行编译工具(支持typescript,原生npm,资源文件压缩...)</li>
<li><a target="_blank" href="https://github.com/caijw/wcc.js" rel="noopener">wcc.js</a> - wcc.js 是wxml文件和wxs文件编译器的nodejs实现</li>
<li><a target="_blank" href="https://github.com/caijw/wcsc.js" rel="noopener">wcsc.js</a> - wcsc.js 是wxss文件编译器的nodejs实现</li>
<li><a target="_blank" href="https://github.com/sunnie1992/weapp-gulp" rel="noopener">weapp-gulp</a> - Gulp高效构建微信小程序，让开发变得更简单</li>
<li><a target="_blank" href="https://github.com/bigmeow/cheers-mp" rel="noopener">cheers-mp</a> - Almost零配置微信原生小程序脚手架，vue-cli般的体验~(ts、less、原生npm、云OSS、CI自动发布体验版)</li>
<li><a target="_blank" href="https://github.com/cicec/we-mobx" rel="noopener">we-mobx</a> - 在微信小程序中使用 MobX</li>
<li><a target="_blank" href="https://github.com/weimobGroup/WeConsole" rel="noopener">weconsole</a> - 功能全面、界面与体验对标 Chrome devtools 的可定制化的小程序开发调试面板</li>
</ul>
<p><a href="#%E7%9B%AE%E5%BD%95">↑ 返回目录 ↑</a></p>
<h2><a id="user-content-插件" class="anchor" aria-hidden="true" href="#插件"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>插件</h2>
<ul>
<li><a target="_blank" href="https://github.com/chemzqm/wxapp.vim" rel="noopener">wxapp.vim</a> - 提供微信小程序开发全方位支持的 vim 插件</li>
<li><a target="_blank" href="https://github.com/Abbotton/weapp-snippet-for-sublime-text-2-3" rel="noopener">weapp-snippet-for-sublime-text-2-3</a> - 为 sublime text 2&amp;3 准备的微信小程序 snippet(停更)</li>
<li><a target="_blank" href="https://github.com/lypeer/Matchmaker" rel="noopener">Matchmaker</a> - IntelliJ IDEA 插件，注入方法</li>
<li><a target="_blank" href="https://github.com/qbright/wechatCode-complete" rel="noopener">wechatCode-complete</a> - webstorm 插件（代码提示）</li>
<li><a target="_blank" href="https://github.com/FloydaGithub/wxapp" rel="noopener">wxapp</a> - sublime plugin</li>
<li><a target="_blank" href="https://github.com/qiu8310/minapp/blob/master/packages/minapp-vscode/README.md" rel="noopener">minapp</a> - vscode 插件（支持 原生/mpvue/wepy 框架）</li>
<li><a target="_blank" href="https://segmentfault.com/a/1190000007132719" rel="nofollow noopener">vscode 插件(代码提示)</a>\</li>
<li><a target="_blank" href="https://github.com/ritwickdey/vscode-live-sass-compiler" rel="noopener">vscode-live-sass-compiler</a> - vscode插件根据.scss文件自动生成wxss文件</li>
<li><a href="http://wepy.iniself.com" rel="nofollow">WePY Plugin For IntelliJ Platform</a> - 让PhpStorm/WebStorm全面支持WePY的开发，包括API(原生/WePY)和组件(官方/自定义)的自动完成/错误检查/高亮/不依赖Vue/...</li>
<li><a target="_blank" href="https://github.com/cnyballk/wxml-vscode" rel="noopener">wxml</a> - vscode插件--微信小程序格式化以及高亮组件(高度自定义)</li>
<li><a target="_blank" href="https://github.com/wux-weapp/wux-weapp-snippets" rel="noopener">wux-weapp-snippets</a> - Wux Weapp Snippets for VS Code.</li>
<li><a target="_blank" href="https://github.com/wux-weapp/wux-weapp-atom-snippets" rel="noopener">wux-weapp-atom-snippets</a> - Wux Weapp Snippets for Atom.</li>
<li><a target="_blank" href="https://github.com/wux-weapp/wux-weapp-sublime-snippets" rel="noopener">wux-weapp-sublime-snippets</a> - Wux Weapp Snippets Plugin for Sublime Text 2/3.</li>
</ul>
<p><a href="#%E7%9B%AE%E5%BD%95">↑ 返回目录 ↑</a></p>
<h2><a id="user-content-组件" class="anchor" aria-hidden="true" href="#组件"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>组件</h2>
<ul>
<li><a target="_blank" href="https://github.com/Tencent/weui-wxss" rel="noopener">weui-wxss ★12.4K+</a> - 同微信原生视觉体验一致的基础样式库</li>
<li><a target="_blank" href="https://github.com/youzan/vant-weapp" rel="noopener">vant-weapp ★12.3k+</a> - 高颜值、好用、易扩展的微信小程序 UI 库</li>
<li><a target="_blank" href="https://github.com/icindy/wxParse" rel="noopener">wxParse ★7.2K+</a> - 微信小程序富文本解析自定义组件，支持 HTML 及 markdown 解析</li>
<li><a target="_blank" href="https://github.com/jin-yufeng/mp-html" rel="noopener">mp-html ★1.4K+</a> - 小程序富文本组件，支持渲染和编辑 html，支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用</li>
<li><a target="_blank" href="https://github.com/TalkingData/iview-weapp" rel="noopener">iview-weapp ★5.5k+</a> - 一套高质量的微信小程序 UI 组件库</li>
<li><a target="_blank" href="https://github.com/wux-weapp/wux-weapp" rel="noopener">wux-weapp ★4.2k+</a> - 一套组件化、可复用、易扩展的微信小程序 UI 组件库</li>
<li><a target="_blank" href="https://github.com/xiaolin3303/wx-charts" rel="noopener">wx-charts ★4.1k+</a> - 微信小程序图表 charts 组件</li>
<li><a target="_blank" href="https://github.com/TaleLin/lin-ui" rel="noopener">Lin UI ★2k+</a> - 一套设计优良、基于原生微信小程序语法的 UI 组件库</li>
<li><a target="_blank" href="https://github.com/TooBug/wemark" rel="noopener">wemark ★1.100+</a> - 微信小程序 Markdown 渲染库</li>
<li><a target="_blank" href="https://github.com/1977474741/image-cropper" rel="noopener">image-cropper ★900+</a> -  <g-emoji class="g-emoji" alias="100" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png">&#x1f4af;</g-emoji>微信小程序图片裁剪组件</li>
<li><a target="_blank" href="https://github.com/o2team/wxapp-img-loader" rel="noopener">wxapp-img-loader ★400+</a> - 微信小程序图片预加载组件</li>
<li><a target="_blank" href="https://github.com/we-plugin/we-cropper" rel="noopener">we-cropper ★400+</a> -  微信小程序图片裁剪工具</li>
<li><a target="_blank" href="https://github.com/jasondu/wxa-plugin-canvas" rel="noopener">wxa-plugin-canvas ★300+</a> - 微信小程序朋友圈海报生成组件</li>
<li><a target="_blank" href="https://github.com/guyoung/WeZRender" rel="noopener">WeZRender ★300+</a> - 微信小程序 Canvas 开发</li>
<li><a target="_blank" href="https://github.com/treadpit/wx_calendar" rel="noopener">wx_calendar ★300+</a> - 小程序日历</li>
<li><a target="_blank" href="https://github.com/youzouzou/wxapp" rel="noopener">wxapp ★300+</a> - 微信小程序组件</li>
<li><a target="_blank" href="https://github.com/liujians/Wa-UI" rel="noopener">Wa-UI ★200+</a> - 针对微信小程序整合的一套 UI 库</li>
<li><a target="_blank" href="https://github.com/icindy/wxSearch" rel="noopener">wxSearch ★200+</a> - 微信小程序优雅的搜索框</li>
<li><a target="_blank" href="https://github.com/zhongjie-chen/wx-scrollable-tab-view" rel="noopener">wx-scrollable-tab-view ★200+</a> - 小程序可滑动得 tab-view</li>
<li><a target="_blank" href="https://github.com/kiinlam/wetoast" rel="noopener">wetoast ★100+</a> - 微信小程序 toast 增强插件</li>
<li><a target="_blank" href="https://github.com/zhongjie-chen/wx-alphabetical-listview" rel="noopener">wx-alphabetical-listview ★100+</a> - 微信小程序带字母滑动的 listview</li>
<li><a target="_blank" href="https://github.com/zhongjie-chen/wx-drawer" rel="noopener">wx-drawer ★100+</a> - 小程序模仿 QQ6.0 侧滑菜单</li>
<li><a target="_blank" href="https://github.com/hawx1993/wxapp-charts" rel="noopener">wxapp-charts ★100+</a> - 微信小程序图表 charts 组件</li>
<li><a target="_blank" href="https://github.com/xiabingwu/chartjs-wechat-mini-app" rel="noopener">chartjs-wechat-mini-app ★100+</a> - chartjs 微信小程序适配</li>
<li><a target="_blank" href="https://github.com/JoeZheng2015/wx-promise-request" rel="noopener">wx-promise-request ★100+</a> -  微信小程序请求队列管理库</li>
<li><a target="_blank" href="https://github.com/we-plugin/we-swiper" rel="noopener">we-swiper ★100+</a> - 微信小程序触摸内容滑动解决方案</li>
<li><a target="_blank" href="https://github.com/bobiscool/wxDraw" rel="noopener">wxDraw ★100+</a> - 微信小程序 2D 动画库</li>
<li><a target="_blank" href="https://github.com/chenjinxinlove/citySelect" rel="noopener">citySelect ★100+</a> ★42 - 微信小程序城市选择器</li>
<li><a target="_blank" href="https://github.com/charleslo1/weapp-cookie" rel="noopener">weapp-cookie ★100+</a> - 一行代码让微信小程序支持 cookie <g-emoji class="g-emoji" alias="cookie" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f36a.png">&#x1f36a;</g-emoji><g-emoji class="g-emoji" alias="rocket" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f680.png">&#x1f680;</g-emoji></li>
<li><a target="_blank" href="https://github.com/lidong1665/WeiXinProject" rel="noopener">WeiXinProject</a> - 微信小程序列表上拉刷新和上拉加载</li>
<li><a target="_blank" href="https://github.com/CalvinHong/wepy-com-charts" rel="noopener">wepy-com-charts</a> - 微信小程序 wepy 图表控件</li>
<li><a target="_blank" href="https://github.com/demi520/wxapp-lock" rel="noopener">wxapp-lock</a> - 微信小程序手势解锁</li>
<li><a target="_blank" href="https://github.com/geminate/mini-gesture-lock" rel="noopener">mini-gesture-lock</a> - 微信小程序手势解锁(无Android Canvas卡顿问题)</li>
<li><a target="_blank" href="https://github.com/weapp-socketio/weapp.socket.io" rel="noopener">weapp.socket.io</a> - socket.io 风格的 websocket 类库</li>
<li><a target="_blank" href="https://github.com/leancloud/weapp-polyfill" rel="noopener">weapp-polyfill</a> - [w3c 标准 API polyfill</li>
<li><a target="_blank" href="https://github.com/youngjuning/wx-promise-pro" rel="noopener">wx-promise-pro ★666+</a> - 微信小程序 Promise 库</li>
<li><a target="_blank" href="https://github.com/youngjuning/wxMD5" rel="noopener">wxMD5</a> - 微信小程序 MD5 库</li>
<li><a target="_blank" href="https://github.com/youngjuning/wxBase64" rel="noopener">wxBase64</a> -  微信小程序base64 库</li>
<li><a target="_blank" href="https://github.com/ianho/xing-weapp-component" rel="noopener">xing-weapp-component</a> - 微信小程序基础组件扩展</li>
<li><a target="_blank" href="https://github.com/ZzjBeatYou/wx-statuslayout" rel="noopener">wx-statuslayout</a> -  小程序页面状态切换组件</li>
<li><a target="_blank" href="https://github.com/bigmeow/minapp-api-promise" rel="noopener">minapp-api-promise</a> - 微信小程序所有 API promise 化</li>
<li><a target="_blank" href="https://github.com/bigmeow/minapp-slider-left" rel="noopener">minapp-slider-left</a> - 微信小程序左划删除组件</li>
<li><a target="_blank" href="https://github.com/kuckboy1994/mp_canvas_drawer" rel="noopener">mp_canvas_drawer</a> - canvas绘制图片助手，一个json就制作分享朋友圈图片</li>
<li><a target="_blank" href="https://github.com/ianho/xing-weapp-editor" rel="noopener">xing-weapp-editor</a> - 小程序图文编辑组件</li>
<li><a target="_blank" href="https://github.com/WARJY/cue" rel="noopener">cue</a> - A WX Compontent Tools</li>
<li><a target="_blank" href="https://github.com/phonycode/wuss-weapp" rel="noopener">wuss-weapp</a> - 一款高质量，组件齐全，高自定义的微信小程序UI组件库</li>
<li><a target="_blank" href="https://github.com/pithyone/miniprogram-datepicker" rel="noopener">miniprogram-datepicker</a> - 小程序日期选择器（支持农历）</li>
<li><a target="_blank" href="https://github.com/vv13/wx-api-promisify" rel="noopener">wx-api-promisify</a> - 优雅地将微信小程序API Promise化</li>
<li><a target="_blank" href="https://github.com/iException/anka-brush" rel="noopener">anka-brush</a> - 一款为简化小程序里canvas画图操作而创建的工具库</li>
<li><a target="_blank" href="https://github.com/iException/anka-tracker" rel="noopener">anka-tracker</a> - 小程序打点库，用于统计用户行为数据</li>
<li><a target="_blank" href="https://github.com/Hzy0913/mpvue-calendar" rel="noopener">mpvue-calendar</a> - 微信小程序/浏览器端的日历组件mpvue-calendar；基于mpvue平台 支持农历、按周切换、可自定义。</li>
<li><a target="_blank" href="https://github.com/qizf7/mp-swipe-card" rel="noopener">mp-swipe-card</a> - 小程序卡片滑动组件,类似探探的效果，貌似现在只支持左右滑动</li>
<li><a target="_blank" href="https://github.com/afishhhhh/weapp.request" rel="noopener">weapp.request</a> - 为微信小程序提供的网络请求组件，是 wx.request 的扩展，基于 Promise API，添加缓存控制。</li>
<li><a target="_blank" href="https://github.com/NewFuture/miniprogram-network" rel="noopener">miniprogram-network</a> - Redefine the Network API of MiniProgram(小程序网络请求库)</li>
<li><a target="_blank" href="https://github.com/ChanceYu/we-validator" rel="noopener">we-validator</a> - 简单灵活的表单验证插件，支持小程序、浏览器以及Nodejs端使用。</li>
<li><a target="_blank" href="https://github.com/zhongxuqi/wx-pulltorefresh-view" rel="noopener">wx-pulltorefresh-view</a> - 简单灵活的下拉上拉刷新组件，支持微信小程序</li>
<li><a target="_blank" href="https://github.com/sunniejs/sol-weapp/" rel="noopener">sol-weapp ★300+</a> -微信小程序营销组件:红包雨、大转盘等营销组件</li>
<li><a target="_blank" href="https://github.com/xjh22222228/weapp-input-frame" rel="noopener">weapp-input-frame</a> - 微信小程序验证码输入框组件</li>
<li><a target="_blank" href="https://github.com/dlhandsome/we-debug" rel="noopener">we-debug</a> - 一款灵活、易于拓展的微信小程序调试工具</li>
<li><a target="_blank" href="https://github.com/tomfriwel/weapp-qrcode" rel="noopener">weapp-qrcode</a> - 微信小程序生成二维码工具</li>
<li><a target="_blank" href="https://github.com/bigmeow/cheers-mp-router" rel="noopener">cheers-mp-router</a> - <g-emoji class="g-emoji" alias="vertical_traffic_light" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f6a6.png">&#x1f6a6;</g-emoji>精巧强大的小程序原生路由</li>
<li><a target="_blank" href="https://github.com/SHERlocked93/wx-updata" rel="noopener">wx-updata</a> - 微信小程序官方 setData 替代品，只修改 data 中你希望修改的部分 <g-emoji class="g-emoji" alias="airplane" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2708.png">&#x2708;&#xfe0f;</g-emoji></li>
<li><a target="_blank" href="https://github.com/deepkolos/three-platformize" rel="noopener">three-platformize</a> - 一个让 THREE 平台化的项目，已适配微信、淘宝、头条小程序</li>
</ul>
<p><a href="#%E7%9B%AE%E5%BD%95">↑ 返回目录 ↑</a></p>
<h2><a id="user-content-demo" class="anchor" aria-hidden="true" href="#demo"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Demo</h2>
<h3><a id="user-content-可以直接运行成功" class="anchor" aria-hidden="true" href="#可以直接运行成功"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>可以直接运行成功</h3>
<ul>
<li><a target="_blank" href="https://github.com/RebeccaHanjw/weapp-wechat-zhihu" rel="noopener">RebeccaHanjw/weapp-wechat-zhihu ★800+</a> - 仿知乎</li>
<li><a target="_blank" href="https://github.com/imageslr/weapp-library" rel="noopener">imageslr/weapp-library ★500+</a> - 在线借书平台（30+页面/组件化/Mock Server/云开发）</li>
<li><a target="_blank" href="https://github.com/imageslr/taro-library" rel="noopener">imageslr/taro-library ★150+</a> - Taro + Redux + 本地 Mock Server 小程序示例项目</li>
<li><a target="_blank" href="https://github.com/wyq2214368/remove-water-mark-mp" rel="noopener">wyq2214368/remove-water-mark-mp</a> - <g-emoji class="g-emoji" alias="fire" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f525.png">&#x1f525;</g-emoji>短视频去水印小程序（含<a href="https://github.com/wyq2214368/remove-water-mark-server">服务端</a>）</li>
<li><a target="_blank" href="https://github.com/deepkolos/three-platformize-demo-wechat" rel="noopener">deepkolos/three-platformize-demo-wechat</a> - 微信小程序 THREE 包含16个loader测试demo</li>
<li><a target="_blank" href="https://github.com/deepkolos/wxmp-tensorflow" rel="noopener">deepkolos/wxmp-tensorflow</a> - 微信小程序下运行最新TensorFlowJS的解决方案</li>
</ul>
<h3><a id="user-content-数据接口有问题" class="anchor" aria-hidden="true" href="#数据接口有问题"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>数据接口有问题</h3>
<ul>
<li><a target="_blank" href="https://github.com/EastWorld/wechat-app-mall" rel="noopener">EastWorld/wechat-app-mall ★3000+</a> - 微信小程序商城</li>
<li><a target="_blank" href="https://github.com/tumobi/nideshop-mini-program" rel="noopener">tumobi/nideshop-mini-program ★2000+</a> - 基于 Node.js + MySQL 开发的开源微信小程序商城</li>
<li><a target="_blank" href="https://github.com/huangjianke/Gitter" rel="noopener">huangjianke/Gitter ★700+</a> - Gitter for GitHub - 可能是目前颜值最高的GitHub小程序客户端</li>
<li><a target="_blank" href="https://github.com/lypeer/wechat-weapp-gank" rel="noopener">lypeer/wechat-weapp-gank ★600+)</a> - Gank 客户端</li>
<li><a target="_blank" href="https://github.com/wangmingjob/weapp-weipiao" rel="noopener">wangmingjob/weapp-weipiao ★300+</a> - 微票</li>
<li><a target="_blank" href="https://github.com/charleyw/wechat-weapp-redux" rel="noopener">charleyw/wechat-weapp-redux ★300+</a> - Redux 绑定库</li>
<li><a target="_blank" href="https://github.com/jectychen/wechat-v2ex" rel="noopener">jectychen/wechat-v2ex ★300+)</a> - V2EX</li>
<li><a target="_blank" href="https://github.com/18380435477/WeApp" rel="noopener">18380435477/WeApp ★300+</a> - 仿微信</li>
<li><a target="_blank" href="https://github.com/zce/weapp-boilerplate" rel="noopener">zce/weapp-boilerplate ★300+</a> - 微信小程序快速开发骨架</li>
<li><a target="_blank" href="https://github.com/bayetech/wechat_mall_applet" rel="noopener">bayetech/wechat_mall_applet ★300+</a> - 电商平台</li>
<li><a target="_blank" href="https://github.com/lanshan-studio/wecqupt" rel="noopener">lanshan-studio/wecqupt ★300+</a> - We 重邮</li>
<li><a target="_blank" href="https://github.com/myronliu347/wechat-app-zhihudaily" rel="noopener">myronliu347/wechat-app-zhihudaily ★200+</a> - 知乎日报</li>
<li><a target="_blank" href="https://github.com/harveyqing/BearDiary" rel="noopener">harveyqing/BearDiary ★200+</a> - 小熊の日记</li>
<li><a target="_blank" href="https://github.com/leancloud/leantodo-weapp" rel="noopener">leancloud/leantodo-weapp ★200+</a> - 集成 LeanCloud 实现的 Todo list</li>
<li><a target="_blank" href="https://github.com/SuperKieran/weapp-artand" rel="noopener">SuperKieran/weapp-artand ★200+</a> - Artand</li>
<li><a target="_blank" href="https://github.com/dongweiming/weapp-zhihulive" rel="noopener">dongweiming/weapp-zhihulive ★200+</a> - 知乎 Live</li>
<li><a target="_blank" href="https://github.com/eyasliu/wechat-app-music" rel="noopener">eyasliu/wechat-app-music ★200+</a> - 音乐播放器</li>
<li><a target="_blank" href="https://github.com/ahonn/weapp-one" rel="noopener">ahonn/weapp-one ★200+</a> - 仿 ONE</li>
<li><a target="_blank" href="https://github.com/giscafer/wechat-weapp-mapdemo" rel="noopener">giscafer/wechat-weapp-mapdemo ★200+</a> - 地图导航、marker标注 （不再维护）</li>
<li><a target="_blank" href="https://github.com/yaoshanliang/weapp-ssha" rel="noopener">yaoshanliang/weapp-ssha ★200+</a> - 企业宣传小程序</li>
<li><a target="_blank" href="https://github.com/hilongjw/weapp-gold" rel="noopener">hilongjw/weapp-gold ★100+</a> - 掘金主页信息流</li>
<li><a target="_blank" href="https://github.com/zce/weapp-douban" rel="noopener">zce/weapp-douban ★100+</a> - 豆瓣电影</li>
<li><a target="_blank" href="https://github.com/hingsir/weapp-douban-film" rel="noopener">hingsir/weapp-douban-film ★100+</a> - 豆瓣电影</li>
<li><a target="_blank" href="https://github.com/kunkun12/weapp" rel="noopener">kunkun12/weapp</a> - 小程序 hello world 尝鲜</li>
<li><a target="_blank" href="https://github.com/natee/wxapp-2048" rel="noopener">natee/wxapp-2048 ★100+</a> - 2048 小游戏</li>
<li><a target="_blank" href="https://github.com/SeptemberMaples/wechat-weapp-demo" rel="noopener">SeptemberMaples/wechat-weapp-demo ★100+</a> - 购物车</li>
<li><a target="_blank" href="https://github.com/hijiangtao/weapp-newsapp" rel="noopener">hijiangtao/weapp-newsapp</a> - 公众号热门文章信息流</li>
<li><a target="_blank" href="https://github.com/charleyw/wechat-weapp-redux-todos" rel="noopener">charleyw/wechat-weapp-redux-todos ★100+</a> - 集成 Redux 实现的Todo list</li>
<li><a target="_blank" href="https://github.com/kraaas/timer" rel="noopener">kraaas/timer ★100+</a> - 番茄时钟</li>
<li><a target="_blank" href="https://github.com/ericzyh/wechat-chat" rel="noopener">ericzyh/wechat-chat ★100+</a> - 聊天室</li>
<li><a target="_blank" href="https://github.com/BelinChung/wxapp-hiapp" rel="noopener">BelinChung/wxapp-hiapp ★100+</a> - HiApp</li>
<li><a target="_blank" href="https://github.com/hardog/wechat-app-flexlayout" rel="noopener">hardog/wechat-app-flexlayout ★100+</a> - flexlayout</li>
<li><a target="_blank" href="https://github.com/dunizb/wxapp-sCalc" rel="noopener">dunizb/wxapp-sCalc ★100+</a> - 简易计算器</li>
<li><a target="_blank" href="https://github.com/litt1e-p/weapp-girls" rel="noopener">litt1e-p/weapp-girls ★100+</a> - 豆瓣美女/妹子图</li>
<li><a target="_blank" href="https://github.com/liumulin614/BeautifulGirl" rel="noopener">liumulin614/BeautifulGirl</a> - 美女模特</li>
<li><a target="_blank" href="https://github.com/romoo/weapp-demo-breadtrip" rel="noopener">romoo/weapp-demo-breadtrip ★100+</a> - 面包旅行</li>
<li><a target="_blank" href="https://github.com/zhuweiyou/fetop100" rel="noopener">zhuweiyou/fetop100 ★100+</a> - 前端TOP100</li>
<li><a target="_blank" href="https://github.com/vace/wechatapp-news-reader" rel="noopener">vace/wechatapp-news-reader ★100+</a> - 新闻阅读器</li>
<li><a target="_blank" href="https://github.com/yaoshanliang/weapp-jump" rel="noopener">yaoshanliang/weapp-jump ★100+</a> - 跳一跳</li>
<li><a target="_blank" href="https://github.com/yaoshanliang/weapp-monument-valley" rel="noopener">yaoshanliang/weapp-monument-valley ★100+</a> - 纪念碑谷</li>
<li><a target="_blank" href="https://github.com/YYJeffrey/july_client" rel="noopener">YYJeffrey/july_client ★100+</a> - 七月（一款社交小程序，集内容发布、动态分享、点赞评论、互动聊天等功能）</li>
<li><a target="_blank" href="https://github.com/Symous/WechatApp-BaisiSister" rel="noopener">Symous/WechatApp-BaisiSister</a> - 百思不得姐</li>
<li><a target="_blank" href="https://github.com/githinkcn/Giteer" rel="noopener">githinkcn/Giteer</a> - Giteer For 码云，基于Taro + Taro UI + Dva的小程序。</li>
<li><a target="_blank" href="https://github.com/DengKe1994/weapp-calculator" rel="noopener">DengKe1994/weapp-calculator</a> - IOS 计算器</li>
<li><a target="_blank" href="https://github.com/monkindey/wx-github" rel="noopener">monkindey/wx-github</a> - GitHub 简历</li>
<li><a target="_blank" href="https://github.com/fluency03/weapp-500px" rel="noopener">fluency03/weapp-500px</a> - 国外摄影社区 500px</li>
<li><a target="_blank" href="https://github.com/luuman/weapp-film" rel="noopener">weapp-film</a> - 淘票票</li>
<li><a target="_blank" href="https://github.com/xujinyang/CoderCalendar-WeApp" rel="noopener">xujinyang/CoderCalendar-WeApp</a> - 程序员老黄历</li>
<li><a target="_blank" href="https://github.com/zhengxiaowai/weapp-github" rel="noopener">zhengxiaowai/weapp-github</a> - github</li>
<li><a target="_blank" href="https://github.com/SeaHub/PigRaising" rel="noopener">Seahub/PigRaising</a> - PigRaising</li>
<li><a target="_blank" href="https://github.com/brucevanfdm/WeChatMeiZhi" rel="noopener">brucevanfdm/WeChatMeiZhi</a> - 妹子图</li>
<li><a target="_blank" href="https://github.com/zhijieeeeee/wechat-app-joke" rel="noopener">zhijieeeeee/wechat-app-joke</a> - 开心一刻</li>
<li><a target="_blank" href="https://github.com/uniquexiaobai/wechat-app-githubfeed" rel="noopener">uniquexiaobai/wechat-app-githubfeed</a> - GitHubFeed</li>
<li><a target="_blank" href="https://github.com/zce/weapp-todos" rel="noopener">zce/weapp-todos</a> - TODOS 任务清单</li>
<li><a target="_blank" href="https://github.com/bruintong/wechat-webapp-douban-movie" rel="noopener">bruintong/wechat-webapp-douban-movie</a> - 豆瓣电影</li>
<li><a target="_blank" href="https://github.com/bruintong/wechat-webapp-douban-location" rel="noopener">bruintong/wechat-webapp-douban-location</a> - 豆瓣同城</li>
<li><a target="_blank" href="https://github.com/arkilis/weapp-jandan" rel="noopener">arkilis/weapp-jandan</a> - 煎蛋</li>
<li><a target="_blank" href="https://github.com/bodekjan/wechat-weather" rel="noopener">bodekjan/wechat-weather</a> - 微信天气</li>
<li><a target="_blank" href="https://github.com/jasscia/ChristmasHat" rel="noopener">jasscia/ChristmasHat</a> - 我要圣诞帽</li>
<li><a target="_blank" href="https://github.com/nanwangjkl/sliding_puzzle" rel="noopener">nanwangjkl/sliding_puzzle</a> - 滑块拼图</li>
<li><a target="_blank" href="https://github.com/kaiwu/weui-scalajs" rel="noopener">kaiwu/weui-scalajs</a> - 使用Scala.js开发</li>
<li><a target="_blank" href="https://github.com/tinajs/tina-hackernews" rel="noopener">tinajs/tina-hackernews</a> - Hacker News 热点</li>
<li><a target="_blank" href="https://github.com/mohuishou/scuplus-wechat" rel="noopener">mohuishou/scuplus-wechat</a> - We 川大</li>
<li><a target="_blank" href="https://github.com/hankzhuo/wx-v2ex" rel="noopener">hankzhuo/wx-v2ex</a> - v2ex</li>
<li><a target="_blank" href="https://github.com/Hongye567/weapp-mark" rel="noopener">Hongye567/weapp-mark</a> - 仿 Mark 影单的微信小程序</li>
<li><a target="_blank" href="https://github.com/w1109790800/We-Todo" rel="noopener">w1109790800/We-Todo</a> - 基于LeanCloud的Todo-List</li>
<li><a target="_blank" href="https://github.com/jae-jae/weapp-github-trending" rel="noopener">jae-jae/weapp-github-trending</a> - Github今日榜单</li>
<li><a target="_blank" href="https://github.com/steedos/mini-vip" rel="noopener">steedos/mini-vip</a> - 华炎微站、微商城</li>
<li><a target="_blank" href="https://github.com/alex1504/wx-guita_tab" rel="noopener">alex1504/wx-guita_tab</a> - 口袋吉他</li>
<li><a target="_blank" href="https://github.com/lonnng/etym" rel="noopener">lonnng/etym</a> - 芒果词源助手</li>
<li><a target="_blank" href="https://github.com/wuhou123/wxxcx" rel="noopener">wuhou123/wxxcx</a> - 武侯的猫，基于wepy构建,整合了n多查询工具（快递，天气，记账，搞笑视频等）</li>
<li><a target="_blank" href="https://github.com/upupming/HITMers" rel="noopener">upupming/HITMers</a> - 博物馆小助手（统计值班表、签到、值班日历及备忘录、国际化、Streamable.com 视频上传等）</li>
<li><a target="_blank" href="https://github.com/LDouble/WeOUC" rel="noopener">LDouble/WeOUC</a> - WeOUC(教务小程序)</li>
<li><a target="_blank" href="https://github.com/Airmole/ShellBox" rel="noopener">Airmole/ShellBox</a> - 贝壳小盒子（校园教务信息查询类工具，获2019高校小程序开发大赛华北区二等奖）</li>
<li><a target="_blank" href="https://github.com/aquanlerou/WeHalo" rel="noopener">aquanlerou/WeHalo ★200+</a> - 爱敲代码的猫（WeHalo 简约风 的微信小程序版博客<g-emoji class="g-emoji" alias="sparkles" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2728.png">&#x2728;</g-emoji>）</li>
<li><a target="_blank" href="https://github.com/WarpPrism/SubwayRoutineMP" rel="noopener">WarpPrism/SubwayRoutineMP</a> - 【东京首尔曼谷新加坡巴黎地铁线路图<g-emoji class="g-emoji" alias="bullettrain_side" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f684.png">&#x1f684;</g-emoji>】</li>
<li><a target="_blank" href="https://github.com/GoKu-gaga/today" rel="noopener">GoKu-gaga/today</a> - 口袋工具（一个小工具的集合）</li>
<li><a target="_blank" href="https://github.com/cy920820/weapp-motor-movies" rel="noopener">cy920820/weapp-motor-movies</a> - 马达电影助手（一个院线电影小助手）</li>
<li><a target="_blank" href="https://github.com/Gwokhov/chronus" rel="noopener">Gwokhov/chronus</a> - Chronus 目标日记（一款能帮助你管理生活目标的云开发微信小程序）</li>
<li><a target="_blank" href="https://github.com/imliubo/Wechat_MQTT_ESP8266_BaiduIoT" rel="noopener">imliubo/Wechat_MQTT_ESP8266_BaiduIoT</a> - 微信智能小管家 (使用微信小程序控制你的硬件设备)</li>
<li><a target="_blank" href="https://github.com/yuzexia/iw3cplus" rel="noopener">yuzexia/iw3cplus</a> - 前端社区<a href="https://www.w3cplus.com" rel="nofollow">www.w3cplus.com</a>的微信小程序</li>
<li><a target="_blank" href="https://github.com/RAOE/show-videos" rel="noopener">RAOE/show-videos</a> - 秀视频（微信小程序短视频社交软件，视频上传，音视频合成，评论，点赞，转发，分享等）</li>
<li><a target="_blank" href="https://github.com/NewFuture/miniprogram-template" rel="noopener">NewFuture/miniprogram-template</a> - 原生API纯TypeScript开发小程序(VSCode as IDE)与完整开发流程</li>
<li><a target="_blank" href="https://github.com/ZhuPeng/mp-githubtrending" rel="noopener">ZhuPeng/mp-githubtrending</a> - 以 Feed 流形式查看 GitHub Trending 仓库集合的工具</li>
<li><a target="_blank" href="https://github.com/yociduo/scrum-planning-poker" rel="noopener">yociduo/scrum-planning-poker</a> - Scrum敏捷估算,基于wepy构建</li>
<li><a target="_blank" href="https://github.com/kilakila-heart/fuliba-front" rel="noopener">kilakila-heart/fuliba-front</a> - 信息流福利吧小程序</li>
<li><a target="_blank" href="https://github.com/lsqy/taro-music" rel="noopener">lsqy/taro-music</a> - <g-emoji class="g-emoji" alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png">&#x1f389;</g-emoji>基于taro + taro-ui + redux + typescript 开发的网易云音乐小程序</li>
<li><a target="_blank" href="https://github.com/Notobey/Himalayan-lite" rel="noopener">仿喜马拉雅lite</a> - 微信小程序原生开发的仿喜马拉雅小程序（极度适合新手入门）</li>
<li><a target="_blank" href="https://github.com/BranLiang/game-stop-app" rel="noopener">branliang/game-stop-app</a> - PSN降价了（一个可以订阅PS4游戏价格的工具）</li>
<li><a target="_blank" href="https://github.com/wk989898/wxchat-mail" rel="noopener">wk989898/wxchat-mail</a> - 仿Gmail邮箱的微信小程序</li>
<li><a target="_blank" href="https://github.com/AnsonZnl/bookshelf" rel="noopener">AnsonZnl/bookshelf</a> -  <g-emoji class="g-emoji" alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png">&#x1f389;</g-emoji>基于云开发的书架小程序（附教程）<g-emoji class="g-emoji" alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png">&#x1f389;</g-emoji></li>
<li><a target="_blank" href="https://github.com/arleyGuoLei/wx-words-pk" rel="noopener">arleyGuoLei/wx-words-pk ★100+</a> - <g-emoji class="g-emoji" alias="fire" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f525.png">&#x1f525;</g-emoji>2020 云开发实现单词对战小程序（随机匹配、人机对战、好友对战），专业UI</li>
<li><a target="_blank" href="https://github.com/arleyGuoLei/wechat-1password" rel="noopener">arleyGuoLei/wechat-1password</a> - <g-emoji class="g-emoji" alias="ox" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f402.png">&#x1f402;</g-emoji><g-emoji class="g-emoji" alias="beer" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f37a.png">&#x1f37a;</g-emoji>有本密码，云开发实现的AES加密密码本，支持指纹、人脸，UI简约大方</li>
<li><a target="_blank" href="https://github.com/wilhantian/periodic-table" rel="noopener">wilhantian/periodic-table</a> - <g-emoji class="g-emoji" alias="gem" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f48e.png">&#x1f48e;</g-emoji>精致的元素周期表小程序</li>
<li><a target="_blank" href="https://github.com/zhijieeeeee/wechat_ocr" rel="noopener">zhijieeeeee/wechat_ocr</a> - <g-emoji class="g-emoji" alias="fire" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f525.png">&#x1f525;</g-emoji>图片扫描提取文字(OCR)微信小程序，采用免费的百度OCR和翻译API，还有微信云函数</li>
<li><a target="_blank" href="https://github.com/terryso/super9" rel="noopener">terryso/super9</a> - <g-emoji class="g-emoji" alias="fire" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f525.png">&#x1f525;</g-emoji>抖音一键去水印小程序: Taro + 微信云开发</li>
<li><a target="_blank" href="https://github.com/zhijieeeeee/wechat_cunzhao" rel="noopener">zhijieeeeee/wechat_cunzhao</a> - <g-emoji class="g-emoji" alias="fire" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f525.png">&#x1f525;</g-emoji>证件照制作微信小程序，全部使用原生控件，使用api制作，先展示带水印证件照，下载后无水印。</li>
<li><a target="_blank" href="https://github.com/zhijieeeeee/wechat_demark" rel="noopener">zhijieeeeee/wechat_demark</a> - <g-emoji class="g-emoji" alias="fire" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f525.png">&#x1f525;</g-emoji>短视频去水印微信小程序，全部使用原生代码，同时还有视频裁剪，视频压缩和视频MD5修改功能。</li>
</ul>
<p><a href="#%E7%9B%AE%E5%BD%95">↑ 返回目录 ↑</a></p>
  <blockquote><p>内容来自：
https://github.com/justjavac/awesome-wechat-weapp</p></blockquote>
				</div>
			</div>
			<div class="previous-next-links">
			<div class="previous-design-link">← <a href="../w3cnote/vue2-start-coding.html" rel="prev"> Vue2.0 新手入门 &#8212; 从环境搭建到发布</a> </div>
			<div class="next-design-link"><a href="../w3cnote/runoob-user-test-intro.html" rel="next"> 关于菜鸟教程用户中心内测说明</a> →</div>
			</div>
			<style>
.wrapper {
  /*text-transform: uppercase; */
  background: #ececec;
  color: #555;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 20px;
  position: relative;
  text-align: center;
  width: 200px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
  white-space: nowrap;
  font-size: 14px;
  text-align: left;
  background: #96b97d;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 14px;
  pointer-events: none;
  position: absolute;
  
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.tooltip a {
	color:#fff;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #96b97d 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 20%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
.wrapper .tooltip1 {
	margin-left: 50px;
	padding-top: 0px;
}
/*
.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}
*/
/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
  display: none;
}

.lte8 .wrapper:hover .tooltip {
  display: block;
}

</style>

<link rel="stylesheet" href="../0/upvotejs.css">
<script src=""></script>
<script src=""></script>
<div id="respond" class="no_webshot"> 
		<div class="comment-signarea" style=" padding: 20px 20px;"> 
	<h3 class="text-muted" id="share_code" style="color: #799961;"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> 点我分享笔记</h3>
	<!--
	<p style="font-size:14px;">笔记需要是本篇文章的内容扩展！</p><br>
	<p style="font-size:12px;"><a href="../tougao" target="_blank">文章投稿，可点击这里</a></p>
	<p style="font-size:14px;"><a href="../w3cnote/runoob-user-test-intro.html#invite" target="_blank">注册邀请码获取方式</a></p>
		<h3 class="text-muted"><i class="fa fa-info-circle" aria-hidden="true"></i> 分享笔记前必须<a href="javascript:;" class="runoob-pop">登录</a>！</h3>
		<p><a href="../w3cnote/runoob-user-test-intro.html#invite" target="_blank">注册邀请码获取方式</a></p>-->
	</div>
		
	<form action="/wp-content/themes/runoob/option/addnote.php" method="post" id="commentform" style="display:none;">
		<div class="comt">
			<div class="comt-title">
				<i style="font-size:36px;" class="fa fa-user-circle" aria-hidden="true"></i>				<p><a id="cancel-comment-reply-link" href="javascript:;">取消</a></p>
			</div>
			<div class="comt-box">
			<div id="mded"></div>
			
				<div class="comt-ctrl">
					<div class="comt-tips"><input type='hidden' name='comment_post_ID' value='16955' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</div>
					<button type="submit" name="submit" id="submit" tabindex="5"><i class="fa fa-pencil" aria-hidden="true"></i> 分享笔记</button>
				</div>
			</div>
		
				
					<div class="comt-comterinfo"> 
						<ul id="comment-author-info">
							<li class="form-inline"><label class="hide" for="author">昵称</label><input class="ipt" type="text" name="author" id="author" value="" tabindex="2" placeholder="昵称"><span class="text-muted">昵称 (必填)</span></li>
							<li class="form-inline"><label class="hide" for="email">邮箱</label><input class="ipt" type="text" name="email" id="email" value="" tabindex="3" placeholder="邮箱"><span class="text-muted">邮箱 (必填)</span></li>
							<li class="form-inline"><label class="hide" for="url">引用地址</label><input class="ipt" type="text" name="url" id="url" value="" tabindex="4" placeholder="引用地址"><span class="text-muted">引用地址</span></li>
						</ul>
					</div>
				
			
		</div>

	</form>
	</div>
<script type="text/javascript">
$(function() {
	//初始化编辑器
	
	var editor = new Simditor({
	  textarea: $('#mded'),
	  placeholder: '写笔记...',
	  upload:false,
	 // upload: {url:'/api/comment_upload_file.php',params: null,fileKey: 'upload_file',connectionCount: 1,leaveConfirm: '文件正在上传，您确定离开?'},
	  defaultImage: 'https://www.runoob.com/images/logo.png',
	  codeLanguages: '',
	  autosave: 'editor-content',
	  toolbar: [  'bold','code','ul','ol','image' ]
	});
	editor.on('selectionchanged', function() {
		$(".code-popover").hide();
	});

	// 提交数据
	$("#share_code").click(function() {
		$(".comment-signarea").hide();
		$("#commentform").show();
		
	});
	$("#user_add_note").click(function() {
		$(".comment-signarea").hide();
		$("#commentform").show();
		$('html, body').animate({
       	    scrollTop: $("#respond").offset().top
    	}, 200);
	});

	// 提交笔记
	var commentform=$('#commentform');
	commentform.prepend('<div id="comment-status" style="display:none;" ></div>');
	var statusdiv=$('#comment-status');
	
	commentform.submit(function(e){
		e.preventDefault();
		var noteContent = editor.getValue();
		// console.log(noteContent);
		noteContent = noteContent.replace(/<pre><code>/g,"<pre>");
		noteContent = noteContent.replace(/<\/code><\/pre>/g,"</pre>");
		
		// 系列化表单数据
		var comment_parent = 0;
		var is_user_logged_in = $("#is_user_logged_in").val();
		var comment_post_ID =  16955;
		var _wp_unfiltered_html_comment = $("#_wp_unfiltered_html_comment").val();
		var comment = noteContent;
		var author = $("#author").val();
		var url = $("#url").val();
		var email = $("#email").val();
		if(isBlank(author) && is_user_logged_in==0) {
			statusdiv.html('<p  class="ajax-error">请输入昵称！</p>').show();
		} else if(isBlank(email)  && is_user_logged_in==0) {
			statusdiv.html('<p  class="ajax-error">请输入邮箱！</p>').show();
		} else {
			// var formdata=commentform.serialize() + "&comment=" + noteContent ;
			// 添加状态信息
			statusdiv.html('<p>Processing...</p>').show();
			// 获取表单提交地址
			var formurl=commentform.attr('action');
			
			// 异步提交
			$.ajax({
					type: 'post',
					url: formurl,
					dataType:'json',
					data: {"comment_parent":comment_parent,"comment_post_ID":comment_post_ID, "_wp_unfiltered_html_comment":_wp_unfiltered_html_comment,"comment":comment,"url":url, "email":email,"author":author},
					error: function(XMLHttpRequest, textStatus, errorThrown){
					statusdiv.html('<p class="ajax-error" >数据不完整或表单提交太快了！</p>').show();
				},
				success: function(data, textStatus){
					if(data.errorno=="0") {
						$("#submit").prop('disabled', true);
						statusdiv.html('<p class="ajax-success" >笔记已提交审核，感谢分享笔记！</p>').show();
						alert('笔记已提交审核，感谢分享笔记！');
					}else{
						statusdiv.html('<p class="ajax-error" >'+data.msg+'</p>').show();
					}
					commentform.find('textarea[name=comment]').val('');
				}
			});
			setTimeout(function(){
		        $("#submit").prop('disabled', false);
		    }, 10*1000);
		}
		return false;

	});
	$(".comt-author").click(function() {
		href = $(this).children("a").attr("href");
		if(href.indexOf("/note/")!=-1) {
			var win = window.open(href, '_blank');
  			win.focus();
		}
	});
	$(".comt-meta span").hover(function(){
		$(this).children(".tooltip").css({ "opacity": 1, "pointer-events": "auto"});
	},function(){
		$(this).children(".tooltip").removeAttr("style");
	});
	/*
	$(".wrapper i").hover(function(){
		$(this).siblings(".tooltip").css({ "opacity": 1, "pointer-events": "auto"});
	},function(){
		$(this).siblings(".tooltip").css({ "opacity": 0, "pointer-events": "auto"});
	});
	*/
	//Upvote.create('runoobvote-id', {callback: vote_callback});
	var ajaxurl = 'https://www.runoob.com/wp-admin/admin-ajax.php';
	var callback = function(data) {
		//console.log($('#runoobvote-id').upvote('upvoted'));
		//console.log($('#runoobvote-id').upvote('downvoted'));
		//console.log(data);
		_vote_action = data.action;
		id_arr = data.id.split('-');
		um_id= id_arr[2];
		//console.log(um_id);
		
		var re = /^[1-9]+/;
		if (re.test(um_id)) { 
			var ajax_data = {
				_vote_action: _vote_action,
				action: "pinglun_zan",
				um_id: um_id,
				um_action: "ding"
			};
			//console.log(ajax_data);
			$.post(ajaxurl,ajax_data,function(status){
				//if(status.vote_num>999) {
				//	_voteHtml = '<span style="display: block; text-align: center;font-size: 20px; color: #6a737c; margin: 8px 0;">'+kFormatter(status.vote_num) +'</span>';
				//	$("#runoobvote-id-" + um_id + " .count").hide().after(_voteHtml);
				//}
				
			});
		}
	};
	if($('#comments').length && $('.upvotejs').length){
		$('.upvotejs').upvote({id: 16955, callback: callback});
	
		$.post(ajaxurl,{"action":"pinglun_zan","postid":16955},function(data){  
			$(data).each(function(key,value) {
				$("#runoobvote-id-" + value.commid + " .upvote").addClass(value.upvotejs_class);
				$("#runoobvote-id-" + value.commid + " .downvote").addClass(value.downvote_class);
				$("#runoobvote-id-" + value.commid + " .count").text(value.upvote_count);
			})
		},'json');
		
	}
	
	
});
function isBlank(str) {
    return (!str || /^\s*$/.test(str));
}
function kFormatter(num) {
	// return num;
    return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000).toFixed(1)) + 'k' : Math.sign(num)*Math.abs(num)
}

</script>

<link rel="stylesheet" href="../0/qa.css?1.44">
<link rel="stylesheet" type="text/css" href="../0/simditor.min.css" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
			<div class="article-heading-ad" id="w3cnote-ad728">
			<script async src=""></script>
			<!-- 移动版 自动调整 -->
			<ins class="adsbygoogle"
			     style="display:inline-block;min-width:300px;max-width:970px;width:100%;height:90px"
			     data-ad-client="ca-pub-5751451760833794"
			     data-ad-slot="1691338467"
			     data-ad-format="horizontal"></ins>
			<script>
			(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
			</div>
			<style>
@media screen and (max-width: 768px) {
	#w3cnote-ad728 {
		display: none;
	}
}
p.note-author {
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: bold;
    color: #78a15a;
    padding-bottom: 2px;
    margin-bottom: 4px;
}
</style>
<script>
var aid = 16955;
</script>
	</div>
		
	</div>
	<div class="listcol last right-column">




<!--
	<div class="tab tab-light-blue"> 订阅</div>
	<div class="sidebar-box">
		<div class="socialicons">
			<a href="../feed" class="rss">RSS 订阅</a>
		
			<form action="//list.qq.com/cgi-bin/qf_compose_send" method="post">
			<input type="hidden" value="qf_booked_feedback" name="t">
			<input type="hidden" value="4b67b6b6c1f5e792559940cab4aebb8f1126fba880bff1a8" name="id">
			<input class="placeholder" id="feed_email" name="to" value="输入邮箱 订阅笔记" autocomplete="off">
			<input type="submit" value="订阅" class="btn btn-primary">
			</form>
		
		</div>
 
	</div>
-->	



<!--
	<div class="sidebar-box cate-list">
	<div class="sidebar-box recommend-here list-link">
			<a href="javascript:void(0);" style="font-size: 16px; color:#64854c;font-weight:bold;">笔记列表</a>
		</div>

 

</div>
-->

	 <div class="sidebar-box cate-list">
		 		

	 	<div class="sidebar-box recommend-here list-link">
			<a href="javascript:void(0);" style="font-size: 16px; color:#64854c;font-weight:bold;">教程列表</a>
		</div>
		
		<div class="cate-items"> 
				<a href="../ado">ADO 教程</a>
	<a href="../ajax">Ajax 教程</a>
	<a href="../android">Android 教程</a>
	<a href="../angularjs2">Angular2 教程</a>
	<a href="../angularjs">AngularJS 教程</a>
	<a href="../appml">AppML 教程</a>
	<a href="../asp">ASP 教程</a>
	<a href="../aspnet">ASP.NET 教程</a>
	<a href="../bootstrap">Bootstrap 教程</a>
	<a href="../bootstrap4">Bootstrap4 教程</a>
	<a href="../bootstrap5">Bootstrap5 教程</a>
	<a href="../cprogramming">C 教程</a>
	<a href="../csharp">C# 教程</a>
	<a href="../cplusplus">C++ 教程</a>
	<a href="../chartjs">Chart.js 教程</a>
	<a href="../cssref">CSS 参考手册</a>
	<a href="../css">CSS 教程</a>
	<a href="../css3">CSS3 教程</a>
	<a href="../django">Django 教程</a>
	<a href="../docker">Docker 教程</a>
	<a href="../dtd">DTD 教程</a>
	<a href="../echarts">ECharts 教程</a>
	<a href="../eclipse">Eclipse 教程</a>
	<a href="../firebug">Firebug 教程</a>
	<a href="../font-awesome">Font Awesome 图标</a>
	<a href="../foundation">Foundation 教程</a>
	<a href="../git">Git 教程</a>
	<a href="../go">Go 语言教程</a>
	<a href="../googleapi">Google 地图 API 教程</a>
	<a href="../highcharts">Highcharts 教程</a>
	<a href="../htmldom">HTML DOM 教程</a>
	<a href="../tags">HTML 参考手册</a>
	<a href="../charsets">HTML 字符集</a>
	<a href="../html">HTML 教程</a>
	<a href="../http">HTTP 教程</a>
	<a href="../ionic">ionic 教程</a>
	<a href="../ios">iOS 教程</a>
	<a href="../java">Java 教程</a>
	<a href="../jsref">JavaScript 参考手册</a>
	<a href="../js">Javascript 教程</a>
	<a href="../jeasyui">jQuery EasyUI 教程</a>
	<a href="../jquerymobile">jQuery Mobile 教程</a>
	<a href="../jqueryui">jQuery UI 教程</a>
	<a href="../jquery">jQuery 教程</a>
	<a href="../json">JSON 教程</a>
	<a href="../jsp">JSP 教程</a>
	<a href="../julia">Julia 教程</a>
	<a href="../kotlin">Kotlin 教程</a>
	<a href="../linux">Linux 教程</a>
	<a href="../lua">Lua 教程</a>
	<a href="../markdown">Markdown 教程</a>
	<a href="../matplotlib">Matplotlib 教程</a>
	<a href="../maven">Maven 教程</a>
	<a href="../memcached">Memcached 教程</a>
	<a href="../mongodb">MongoDB 教程</a>
	<a href="../mysql">MySQL 教程</a>
	<a href="../nodejs">Node.js 教程</a>
	<a href="../numpy">NumPy 教程</a>
	<a href="../pandas">Pandas 教程</a>
	<a href="../perl">Perl 教程</a>
	<a href="../php">PHP 教程</a>
	<a href="../postgresql">PostgreSQL 教程</a>
	<a href="../python3">Python 3 教程</a>
	<a href="../python">Python 基础教程</a>
	<a href="../r">R 教程</a>
	<a href="../rdf">RDF 教程</a>
	<a href="../react">React 教程</a>
	<a href="../redis">Redis 教程</a>
	<a href="../rss">RSS 教程</a>
	<a href="../ruby">Ruby 教程</a>
	<a href="../rust">Rust 教程</a>
	<a href="../sass">Sass 教程</a>
	<a href="../scala">Scala 教程</a>
	<a href="../scipy">SciPy 教程</a>
	<a href="../servlet">Servlet 教程</a>
	<a href="../soap">SOAP 教程</a>
	<a href="../sql">SQL 教程</a>
	<a href="../sqlite">SQLite 教程</a>
	<a href="../svg">SVG 教程</a>
	<a href="../svn">SVN 教程</a>
	<a href="../swift">Swift 教程</a>
	<a href="../tcpip">TCP/IP 教程</a>
	<a href="../typescript">TypeScript 教程</a>
	<a href="../vbscript">VBScript 教程</a>
	<a href="../vue2">Vue.js 教程</a>
	<a href="../vue3">Vue3 教程</a>
	<a href="../w3c">W3C 教程</a>
	<a href="../webservices">Web Service 教程</a>
	<a href="../wsdl">WSDL 教程</a>
	<a href="../xlink">XLink 教程</a>
	<a href="../dom">XML DOM 教程</a>
	<a href="../schema">XML Schema 教程</a>
	<a href="../xml">XML 教程</a>
	<a href="../xpath">XPath 教程</a>
	<a href="../xquery">XQuery 教程</a>
	<a href="../xslfo">XSLFO 教程</a>
	<a href="../xsl">XSLT 教程</a>
	<a href="../data-structures">数据结构</a>
	<a href="../regexp">正则表达式</a>
	<a href="../quiz">测验</a>
	<a href="../browsers">浏览器</a>
	<a href="../quality">网站品质</a>
	<a href="../web">网站建设指南</a>
	<a href="../hosting">网站服务器教程</a>
	<a href="../design-pattern">设计模式</a>
			
		</div> 
		 	 </div>
</div>
	</div>
</div>


<!-- 底部 -->
<div id="footer" class="mar-t50">
   <div class="runoob-block">
    <div class="runoob cf">
     <dl>
      <dt>
       在线实例
      </dt>
      <dd>
       &middot;<a target="_blank" href="../html/html-examples.html">HTML 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../css/css-examples.html">CSS 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../js/js-examples.html">JavaScript 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../ajx/ajax-examples.html">Ajax 实例</a>
      </dd>
       <dd>
       &middot;<a target="_blank" href="../jquery/jquery-examples.html">jQuery 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../xml/xml-examples.html">XML 实例</a>
      </dd>
      <dd>
       &middot;<a target="_blank" href="../java/java-examples.html">Java 实例</a>
      </dd>
     
     </dl>
     <dl>
      <dt>
      字符集&工具
      </dt>
      <dd>
       &middot; <a target="_blank" href="../charsets/html-charsets.html">HTML 字符集设置</a>
      </dd>
      <dd>
       &middot; <a target="_blank" href="../tags/html-ascii.html">HTML ASCII 字符集</a>
      </dd>
     <dd>
       &middot; <a target="_blank" href="https://c.runoob.com/front-end/6939/">JS 混淆/加密</a>
      </dd> 
      <dd>
       &middot; <a target="_blank" href="https://c.runoob.com/front-end/6232/">PNG/JPEG 图片压缩</a>
      </dd>
      <dd>
       &middot; <a target="_blank" href="../tags/html-colorpicker.html">HTML 拾色器</a>
      </dd>
      <dd>
       &middot; <a target="_blank" href="..//c.runoob.com/front-end/53">JSON 格式化工具</a>
      </dd>
      <dd>
       &middot; <a target="_blank" href="..//c.runoob.com/front-end/6680/">随机数生成器</a>
      </dd>
     </dl>
     <dl>
      <dt>
       最新更新
      </dt>
                   <dd>
       &middot;
      <a href="../matplotlib/matplotlib-imread.html" title="Matplotlib imread() 方法">Matplotlib imre...</a>
      </dd>
              <dd>
       &middot;
      <a href="../matplotlib/matplotlib-imsave.html" title="Matplotlib imsave() 方法">Matplotlib imsa...</a>
      </dd>
              <dd>
       &middot;
      <a href="../matplotlib/matplotlib-imshow.html" title="Matplotlib imshow() 方法">Matplotlib imsh...</a>
      </dd>
              <dd>
       &middot;
      <a href="../matplotlib/matplotlib-hist.html" title="Matplotlib 直方图">Matplotlib 直方图</a>
      </dd>
              <dd>
       &middot;
      <a href="../python3/python-func-object.html" title="Python object() 函数">Python object()...</a>
      </dd>
              <dd>
       &middot;
      <a href="../python3/python-ai-draw.html" title="Python AI 绘画">Python AI 绘画</a>
      </dd>
              <dd>
       &middot;
      <a href="../w3cnote/cursor-editor.html" title="神辅助 Cursor 编辑器，加入 GPT-4 让编码更轻松！">神辅助 Cursor ...</a>
      </dd>
             </dl>
     <dl>
      <dt>
       站点信息
      </dt>
      <dd>
       &middot;
       <a target="_blank" href="mailto:admin@runoob.com" rel="external nofollow">意见反馈</a>
       </dd>
      <dd>
       &middot;
      <a target="_blank" href="../disclaimer">免责声明</a>
       </dd>
      <dd>
       &middot;
       <a target="_blank" href="../aboutus">关于我们</a>
       </dd>
      <dd>
       &middot;
      <a target="_blank" href="../archives">文章归档</a>
      </dd>
    
     </dl>
    
     <div class="search-share">
      <div class="app-download">
        <div>
         <strong>关注微信</strong>
        </div>
      </div>
      <div class="share">
      <img width="128" height="128" src="/wp-content/themes/runoob/assets/images/qrcode.png" />
       </div>
     </div>
     
    </div>
   </div>
   <div class="w-1000 copyright">
     Copyright &copy; 2013-2023    <strong><a href="../" target="_blank">菜鸟教程</a></strong>&nbsp;
    <strong><a href="../" target="_blank">runoob.com</a></strong> All Rights Reserved. 备案号：<a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/">闽ICP备15012807号-1</a>
   </div>
  </div>
  <div class="fixed-btn">
    <a class="go-top" href="javascript:void(0)" title="返回顶部"> <i class="fa fa-angle-up"></i></a>
    <a class="qrcode"  href="javascript:void(0)" title="关注我们"><i class="fa fa-qrcode"></i></a>
    <a class="writer" style="display:none" href="javascript:void(0)"   title="标记/收藏"><i class="fa fa-star" aria-hidden="true"></i></a>
    <!-- qrcode modal -->
    <div id="bottom-qrcode" class="modal panel-modal hide fade in">
      <h4>微信关注</h4>
      <div class="panel-body"><img alt="微信关注" width="128" height="128" src="/wp-content/themes/runoob/assets/images/qrcode.png"></div> 
    </div>
  </div>

 <div style="display:none;">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-84264393-2"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-84264393-2');
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?3eec0b7da6548cf07db3bc477ea905ee";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</div>
<script>
window.jsui={
    www: 'https://www.runoob.com',
    uri: 'https://www.runoob.com/wp-content/themes/runoob'
};
</script>

<script src=""></script>
<script src=""></script>

</body>
</html>